<template>
  <div>
    <Tabs v-model:activeKey="activeKey" centered :tabBarGutter="57" @change="handleChange">
      <TabPane
        key="account"
        tab="欢迎登录"
        v-if="
          props.loginMode == 0 ||
          props.loginMode == 3 ||
          props.loginMode == 4 ||
          props.loginMode == 6
        "
      />
      <TabPane
        key="mobile"
        tab="手机登录"
        v-if="
          props.loginMode == 1 ||
          props.loginMode == 4 ||
          props.loginMode == 5 ||
          props.loginMode == 6
        "
      />
      <TabPane
        key="scan"
        tab="扫码登录"
        v-if="
          props.loginMode == 2 ||
          props.loginMode == 3 ||
          props.loginMode == 5 ||
          props.loginMode == 6
        "
      />
    </Tabs>
  </div>
</template>
<script lang="ts" setup>
  // 0|帐号登录,1|手机登录,2|扫码登录,3|帐号/扫码登录,4|帐号/手机,5|扫码/手机,6|账号/手机/扫码
  import { unref, ref } from 'vue';
  import { Tabs, TabPane } from 'ant-design-vue';
  const emits = defineEmits(['change']);
  const activeKey = ref('account');

  const props = defineProps({
    loginMode: {
      type: Number,
      default: 3,
    },
  });

  const handleChange = () => {
    emits('change', unref(activeKey));
  };
</script>
<style scoped>
  :deep(.ant-tabs-tab-btn) {
    font-weight: bold;
    font-size: 16px;
    color: #666666;
  }
  :deep(.ant-tabs-top > .ant-tabs-nav::before, .ant-tabs-bottom
      > .ant-tabs-nav::before, .ant-tabs-top > div > .ant-tabs-nav::before, .ant-tabs-bottom
      > div
      > .ant-tabs-nav::before) {
    border: 0;
  }
  :deep(.ant-tabs-tab.ant-tabs-tab-active .ant-tabs-tab-btn) {
    color: #070707;
  }
  :deep(.custom-tabs .ant-tabs-nav-container) {
    position: relative;
  }
  :deep(.ant-tabs .ant-tabs-ink-bar) {
    width: 29px !important;
    transform: translateX(68%);
    position: absolute;
    bottom: 0;
  }
</style>
